import React from 'react';
import { history } from 'umi'
import { Button, Tooltip } from 'antd';
import Icon from '@/components/IconPro';
import { parseLocation } from '@/utils/utils';
import { newTabProps } from '@/utils/tab';
import styles from './index.less';

const OVERDUE = -1;

const ApplyIcon = () => (
    <div className={`${styles.icon} ${styles.applyIcon}`}>
        <Icon type="iconwoshenhede" />
    </div>
);

const WorkIcon = () => (
    <div className={`${styles.icon} ${styles.workIcon}`}>
        <Icon type="icongms_list_icon_holiday_default" />
    </div>
);

const FlowIcon = () => (
    <div className={`${styles.icon} ${styles.flowIcon}`}>
        <Icon type="iconOperationProcedure" />
    </div>
);

const handleClick = url => {
    const [pathname, redirectQuery] = parseLocation({ pathname: url });
    history.push({ pathname, query: redirectQuery, ...newTabProps });
};

const TodoCard = ({ todo = {}, processed }) => (
    <div className={styles.todoCardWrapper} onClick={() => handleClick(todo.targetUrl)}>
        <div className={`${styles.cardWrapper} ${todo.pendingState === OVERDUE ? styles.overdueCardWrapper : ''}`}>
            {todo.pendingState === OVERDUE && !processed && <div className={styles.overdue}>逾期</div>}
            <div className={styles.left}>
                {/* eslint-disable no-nested-ternary */}
                {todo.taskType === 'approval' ? <ApplyIcon /> : todo.taskType === 'work' ? <WorkIcon /> : <FlowIcon />}
            </div>
            <div className={styles.right}>
                <p>
                    <Tooltip overlayClassName={styles.todoCardTooltip} placement="topLeft" title={todo.taskTitle}>
                        {todo.taskTitle}
                    </Tooltip>
                </p>
                <ul className={styles.abstract}>
                    {todo.abstractList?.map((item, index) => {
                        if (index > 3) {
                            return null;
                        }
                        return (
                            <li key={item.itemName}>
                                <span>{item.itemName}：</span>
                                <span>
                                    <Tooltip
                                        overlayClassName={styles.todoCardTooltip}
                                        placement="topLeft"
                                        title={item.itemValue}
                                    >
                                        {item.itemValue}
                                    </Tooltip>
                                </span>
                            </li>
                        );
                    })}
                </ul>
            </div>
        </div>
        <div className={styles.footer}>
            <div className={styles.pushInfo}>
                <Icon type="iconDataSources" />
                <span>
                    <Tooltip
                        overlayClassName={styles.todoCardTooltip}
                        placement="topLeft"
                        title={
                            todo.taskResourceName || todo.sendTime
                                ? `${todo.sendTime} 来源【${todo.taskResourceName}】`
                                : null
                        }
                    >
                        {todo.sendTime} 来源【{todo.taskResourceName}】
                    </Tooltip>
                </span>
            </div>
            {processed ? (
                <Button type="default" onClick={() => handleClick(todo.targetUrl)}>
                    {todo.taskType === 'approval' ? '审批详情' : '操作详情'}
                </Button>
            ) : (
                <Button type="default" onClick={() => handleClick(todo.targetUrl)}>
                    {todo.taskType === 'approval' ? '审批' : '处理'}
                </Button>
            )}
        </div>
    </div>
);

export default TodoCard;
